<template>
	<view class="login">
		<!--默认界面-->
		<view>
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
				</view>
			</view>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" style="padding-top: 8px;">
				<view class="u-m-r-10" >
					<u-avatar :src="pic" mode="square"  @click="hasLogin()"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-14 u-tips-color" v-if="isLogin">
						<h3 style="font-weight: bold;color: #18B566;">{{userName}}</h3>
					</view>
					<view class="u-font-18 u-p-b-20" v-else>点击头像登录</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="scan" color="#969799" size="28"></u-icon>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="rmb-circle" title="钱包" @click="myBag()"></u-cell-item>
					<u-cell-item icon="setting" title="设置" @click="mySet()"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="account" title="退出登录" @click="loginOut()"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				pic: '',
			}
		},
		computed: {
			userName() {
				return this.$store.getters.getName;
			},
			isLogin() {
				return this.$store.getters.isLogin;
			}
		},
		methods: {
			myBag() {
				uni.navigateTo({
					url: "/pages/my/myBag"
				})
			},
			mySet() {
				uni.navigateTo({
					url: "/pages/my/setting"
				})
			},
			hasLogin() {
				if (isNaN(this.isLogin) == true) {
					uni.showToast({
						title: '您已经登录',
						icon: 'success'
					});
				} else {
					uni.navigateTo({
						url: "/pages/my/loginAndReg/login"
					})
				}
			},
			loginOut() {
				if (isNaN(this.isLogin) == false) {
					uni.showToast({
						title: '您还未登录',
						icon: 'none'
					});
				} else {
					this.$store.dispatch("LogOut").then(response => {
						uni.showToast({
							title: '成功退出',
							icon: 'success'
						});
					});
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #ededed;
	}

	/deep/.uni-input-input {
		width: 100px;
	}

	/deep/ .u-size-default {
		width: 70px;
		height: 30px;
		display: inline-block;
		line-height: 30px;
		margin-right: 10px;
	}

	.load {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-40%, -40%);
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.form {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding-bottom: 10px;
	}

	.title {
		margin-bottom: 10px;
		text-align: center;
		font-size: 25px;
	}

	.input {
		padding-bottom: 10px;
	}

	.btn {
		text-align: center;
	}

	.u-size-mini {
		margin-right: 8px;
	}

	.logo {
		margin: 10px;
	}
</style>
